<template>
  <!-- 相关方评定计划 -->
  <div class="threeSimultaneousne">
    <basic-container>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
      >
        <!-- 左上方菜单栏 -->
        <template slot="menuLeft">
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
            v-if="threeSimultaneousne_delete"
            @click="handleDelete">
            删 除
          </el-button>
        </template>
        <!-- 审批状态表格自定义 -->
        <template slot="zt" slot-scope="scope">
          <span v-if="approveStatus[scope.row['zt']] === undefined">-</span>
          <span v-else>{{approveStatus[scope.row['zt']]}}</span>
        </template>

        <!-- 审批表格自定义 -->
        <template slot="approve" slot-scope="scope">
          <el-button
            v-if="scope.row['approveSettingPermissions']"
            type="danger"
            size="mini"
            icon="el-icon-setting"
            @click="handleApproveSetting(scope.row)">
            审批设置
          </el-button>
          <el-button
            v-if="scope.row['approvalAuthority']"
            type="success"
            size="mini"
            icon="el-icon-document-checked"
            @click="handleApprove(scope.row)">
            审批
          </el-button>
          <span v-if="!scope.row['approveSettingPermissions'] && !scope.row['approvalAuthority']">-</span>
        </template>
        <!-- 评定记录表格自定义 -->
        <template slot="record" slot-scope="scope">
          <el-button 
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="handleEvaluationRecord(scope.row)">
            评定记录
          </el-button>
        </template>
      </avue-crud>
      <!-- 弹窗：审批设置 -->
      <approveSetting
        :approveSettingDialog="approveSettingDialog"
        :selectedSettingId="selectedSettingId"
        @confirmApproveSetting="confirmApproveSetting"
        @closeApproveSettingDialog="closeApproveSettingDialog">
      </approveSetting>
      <!-- 审批弹窗 -->
      <auditingDialog
        :approveDialog="approveDialog"
        :approveForm="approveForm"
        @confirmApproveRelatedParty="confirmApproveRelatedParty"
        @closeApproveDialog="closeApproveDialog">
      </auditingDialog>
    </basic-container>
  </div>
</template>

<script>
import {
  getList,
  add,
  update,
  remove,
  setApproveUser
} from "@/api/equipmentmanage/threeSimultaneousne";
import { mapGetters } from "vuex";
import approveSetting from "../../basedata/interestedpartymange/components/approveSetting";
import auditingDialog from "../dialog/auditingDialog";
export default {
  components: {
    approveSetting,
    auditingDialog
  },
  data() {
    return {
      approveStatus: {
        1: "待审批",
        2: "审批中",
        3: "审批不通过",
        4: "审批完成",
        5: "个人审批结束",
      },
      form: {},
      query: {},
      data: [],
      loading: true,
      selectionList: [],
      page: {
        pageSize: this.$pageSize,
        currentPage: 1,
        total: 0
      },
      option: {
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchSpan: 5,
        searchMenuSpan: 4,
        border: true,
        index: false,
        selection: true,
        viewBtn: true,
        refreshBtn: true,
        columnBtn: false,
        dialogClickModal: false,
        menuWidth: 200,
        column: [
          {
            label: "项目名称",
            prop: "xmmc",
            search: true,
            align: "center",
          },
          {
            label: "项目编号",
            prop: "xmbh",
            hide: true,
          },
          {
            label: "项目性质",
            align: "center",
            prop: "xmxz",
            hide: true,
          },
          {
            label: "安全设施三同时",
            align: "center",
            prop: "aqsssts",
            hide: true,
          },
          {
            label: "项目开工日期",
            prop: "xmkgrq",
            align: "center",
            hide: true,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          {
            label: "项目竣工验收日期",
            prop: "xmjgrq",
            align: "center",
            hide: true,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          {
            label: "项目描述",
            prop: "xmms",
            align: "center",
            type: "textarea",
            span: 24,
            maxlength: 150,
          },
           {
            label: "批准部门",
            prop: "pzbm",
            align: "center",
            display: false,
            width: 300,
            slot: true
          },
          {
            label: "批准日期",
            prop: "pzrq",
            align: "center",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          {
            label: "建设日期",
            prop: "jsrq",
            align: "center",
            hide: true,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          {
            label: "完成日期",
            prop: "wcrq",
            hide: true,
            align: "center",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          {
            label: "备注：",
            prop: "bz",
            hide: true,
            type: "textarea",
            span: 24,
            maxlength: 150
          },
          {
            label: "项目建设单位",
            prop: "xmjsdw",
            hide: true,
          },
          {
            label: "项目总投资(万元)",
            prop: "xmztz",
            hide: true,
          },
          {
            label: "项目建设地点",
            prop: "xmjsdd",
            hide: true,
          },
          {
            label: "项目进展情况",
            prop: "xmjz",
            hide: true,
          },
          {
            label: "审批状态",
            prop: "zt",
            align: "center",
            display: false,
            slot: true
          },
          {
            label: "审批",
            prop: "approve",
            align: "center",
            width: 220,
            slot: true,
            display: false
          },
        ]
      },
      // 弹窗：评定记录
      evaluationRecordDialog: false,
      selectedRecordId: "",
      evaluationQuery: {},
      evaluationLoading: true,
      evaluationData: [],
      evaluationPage: {
        pageSize: this.$pageSize,
        currentPage: 1,
        total: 0
      },
      // 弹窗：审批设置
      approveSettingDialog: false,
      selectedSettingId: "",
      // 弹窗：审批
      approveDialog: false,
      approveForm: ""
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    // 按钮权限
    permissionList() {
      return {
        addBtn: this.vaildData(
          this.permission.threeSimultaneousne_add,
          false
        ),
        viewBtn: this.vaildData(
          this.permission.threeSimultaneousne_view,
          false
        ),
        delBtn: this.vaildData(
          this.permission.threeSimultaneousne_delete,
          false
        ),
        editBtn: this.vaildData(
          this.permission.threeSimultaneousne_edit,
          false
        )
      };
    },

    // 勾选项ID
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    // 新增
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },

    // 修改
    rowUpdate(row, index, done, loading) {
      for (let key in row) {
        if (key.indexOf("$") >= 0) {
          delete row[key];
        }
      }
      row.pdry = typeof row.pdry === "object" ? row.pdry.join(",") : row.pdry;
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        },
        error => {
          loading();
          console.log(error);
        }
      );
    },

    // 删除一条
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },

    // 删除多条
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },

    // 打开新增、编辑、查看弹窗前
    beforeOpen(done, type) {
      if(type === "edit") {
        if(!this.form.editPermissions) {
          this.$message.warning("当前三同时审批不可编辑!");
          return;
        }
      }
      done();
    },

    // 清空搜索条件
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },

    // 搜索条件改变
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    // 勾选
    selectionChange(list) {
      this.selectionList = list;
    },

    // 清空勾选
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },

    // 更换页数
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },

    // 更换每页显示数量
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

    // 刷新
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    // 加载数据
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },

    /**
     * 弹窗：评定记录
    */

    // 打开评定记录弹窗
    handleEvaluationRecord(row) {
      this.evaluationPage.currentPage = 1;
      this.selectedRecordId = row.id;
      this.evaluationRecordDialog = true;
    },

    // 搜索条件改变
    evaluationSearchChange(params, done) {
      this.evaluationQuery = params;
      this.evaluationPage.currentPage = 1;
      done();
    },

    // 清空搜索条件
    evaluationSearchReset() {
      this.evaluationQuery = {};
    },

    // 更换页数
    evaluationCurrentChange(currentPage) {
      this.evaluationPage.currentPage = currentPage;
    },

    // 更换每页显示数量
    evaluationSizeChange(pageSize) {
      this.evaluationPage.pageSize = pageSize;
    },

    // 刷新
    evaluationRefreshChange() {
    },

    // 关闭、取消评定记录弹窗
    closeEvaluationRecordDialog() {
      this.evaluationRecordDialog = false;
      this.selectedRecordId = "";
    },

    /**
     * 弹窗：审批设置
    */

    // 打开审批设置弹窗
    handleApproveSetting(row) {
      this.selectedSettingId = row.id;
      this.approveSettingDialog = true;
    },

    // 确定审批设置
    confirmApproveSetting(approvalUsers) {
      var updateData = this.formatSettingData(approvalUsers);
      setApproveUser(updateData).then(res => {
        if(res.data.success) {
          this.closeApproveSettingDialog();
          this.page.currentPage = 1;
          this.onLoad(this.page);
        }
      });
    },

    // 格式化审批设置数据
    formatSettingData(row) {
      var data = {
        bizId: this.selectedSettingId,
        flowOperatorList: []
      };
      for(let i = 0 ; i < row.length ; i++) {
        data.flowOperatorList.push({
          userId: row[i].id,
          taskOrder: i + 1
        });
      }
      return data;
    },

    // 关闭、取消审批设置弹窗
    closeApproveSettingDialog() {
      this.selectedSettingId = "";
      this.approveSettingDialog = false;
    },
    // 打开审批弹窗
    handleApprove(row) {
      this.approveForm = row;
      this.approveDialog = true;
    },
    // 确认审批
    confirmApproveRelatedParty() {
      this.closeApproveDialog();
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },

    // 关闭、取消审批弹窗
    closeApproveDialog() {
      this.approveForm = "";
      this.approveDialog = false;
    }

  }
};
</script>

<style lang="scss">
.related_party_plan_approve_dialog {
  .avue-form__menu--center {
    text-align: center;
  }
}

.approve_setting_dialog,
.choose_approve_user_dialog {
  .avue-crud__menu,
  .avue-crud__pagination {
    display: none !important;
  }
}

.approve_setting_dialog {
  .el-table__header-wrapper,
  .el-table__empty-block {
    display: none !important;
  }
}
</style>

<style lang="scss" scoped>
.evaluation_record_footer,
.choose_approve_user_footer,
.approve_setting_footer {
  text-align: center;
  margin-top: 15px;

  .el-button {
    width: 100px;
    height: 35px;
  }
}
</style>